import React, { useCallback, useState } from 'react'
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import { EventsITF } from '@INTERFACES/Events'
import { LanguageType } from '@INTERFACES/Common'
import { getPlatform, openPage } from '@UTILS/common'
import Taro from '@tarojs/taro'
import { Analytic_Type } from '@CONSTANTS/analytic'
import DBConfig from '@CONFIG/DBConfig'
import { generateUUID } from '@pier88health/p8h-common'
import { RouteSceneKey } from '@NAVIGATION/scenes'
import style from './PlanGuidePersona.module.scss'

const { isWeb } = getPlatform()

interface Props {
  data: EventsITF[];
  language: LanguageType
}

interface PersonaItemProps {
  data: EventsITF;
  language: LanguageType;
  index: number
}

const PersonaItem: React.FC<PersonaItemProps> = ({ data, language, index }) => {
  const { BannerFileName, p8Id, RouteType, RouteData, Title } = data || {}
  const onClickItem = useCallback(
    () => {
      if (isWeb) return
      const requestId = generateUUID()
      Taro.tracker.trackEvent(Analytic_Type.tap_home_guide_persona.eventId,
        { RouteType, title: Title?.[language], ...RouteData, clickIndex: index },
        { Scene: RouteSceneKey.homePage, RequestId: requestId })
      Object.assign(RouteData, { requestId })
      openPage(RouteType, RouteData)
    },
    [RouteData, RouteType, Title, language, index]
  )
  return (
    <View className={style.personaItem} onClick={onClickItem}>
      <Image
        src={`${DBConfig.staticBannerImageUrl}${BannerFileName?.[language]}`}
        key={p8Id}
        className={style.image}
      />
    </View>
  )
}
const PlanGuidePersona: React.FC<Props> = ({ data, language }) => {
  const [activeIndex, setActiveIndex] = useState<number>(0)
  const onChange = useCallback(e => {
    const { detail: { current } } = e
    setActiveIndex(current)
  }, [])
  const onClickWeb = useCallback(() => {
    if (!isWeb) return
    const item = data?.[activeIndex]
    if (!item) return
    const { Title, RouteData, RouteType } = item
    const requestId = generateUUID()
    Taro.tracker.trackEvent(Analytic_Type.tap_home_guide_persona.eventId,
      { RouteType, title: Title?.[language], ...RouteData, clickIndex: activeIndex },
      { Scene: RouteSceneKey.homePage, RequestId: requestId })
    Object.assign(RouteData, { requestId })
    openPage(RouteType, RouteData)
  }, [activeIndex, data, language])
  const isOne = data.length === 1
  if (!Array.isArray(data) || data.length === 0) return null
  return (
    <View className={style.container}>
      <View className={style.bg} />
      <View className={style.titleContainer}>
        <View className={style.line} />
        <Text className={style.title}>已为50,000+头痛患者提供帮助</Text>
      </View>
      <View onClick={onClickWeb} className={style.swiperContainer}>
        <Swiper
          autoplay
          interval={3000}
          duration={1000}
          indicatorDots={false}
          circular={!isOne}
          onChange={onChange}
          className={style.swiperContent}
        >
          {data.map((item, index) => (
            <SwiperItem key={`desc_${index}`}>
              <PersonaItem data={item} language={language} index={index} />
            </SwiperItem>
          ))}
        </Swiper>
        {!isOne && (
          <View className={style.dotView}>
            {data.map((i, index) => (
              <View key={`dots_${index}`} className={`${style.dot} ${index === activeIndex ? style.active : ''}`} />
            ))}
          </View>
        )}
      </View>
    </View>
  )
}

export default PlanGuidePersona
